 /*
 * @description: 售后设置
 * @Author: along
 * @Date: 2020-07-09
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-10 15:58:55
 * @Update: 售后设置迭代，新增地址库列表
 */
<template>
    <div class="marketgoodAfterSale goodAfterSale">
        <p class="sale-title">
            售后设置
        </p>
        <div class="sale-header">
            <p class="sale-head-title">
                未发货订单的申请设置
            </p>
            <div
                class="sale-main"
            >
                <p class="sale-main-text">
                    未发状态下，买家申请退款是否自动通过
                </p>
                <el-switch
                    v-model="order_process_cancel_need_verify"
                    :active-text="order_process_cancel_need_verify ? '(需要审核)' : '(自动通过)'"
                    :active-value="1"
                    :inactive-value="0"
                    @change="fnSetAuti()"
                />
            </div>
        </div>
        <div class="header">
            <p class="wrap-title">
                退货地址库
            </p>
            <el-button
                size="small"
                type="primary"
                @click="() => {
                    this.$router.push({
                        name: 'goodAfterEdit'
                    })
                }"
            >
                <i class="iconfont icon-jiahao" />
                新建地址
            </el-button>
        </div>
        <el-table
            :data="tableData"
            height="100%"
            style="width: calc(100% - 64px);margin: 0 32px;margin-bottom: 15px"
            border
            ref="goodAfterSale"
        >
            <el-table-column
                type="index"
                width="80"
                label="序号"
                align="center"
            />
            <el-table-column
                prop="address_title"
                label="地址名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            />
            <el-table-column
                prop="user_name"
                label="联系人"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            />
            <el-table-column
                prop="phone"
                label="手机号"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            />
            <el-table-column
                prop="detail_info"
                label="详细地址"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <p class="adress">
                        <span
                            class="adress-label"
                            v-if="scope.row.is_default == 1"
                        >默认</span>
                        <span
                            class="adress-label"
                            :style="{opacity: '0'}"
                            v-if="scope.row.is_default == 0"
                        >默认</span>
                        {{ scope.row.detail_info }}
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        class="curse-add"
                        style="padding-bottom:3px;"
                        @click="editAddress(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        type="text"
                        class="curse-add"
                        style="padding:0;margin-left:0"
                        @click="deleteAddress(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- /分页 -->
        <!-- <div class="pagination-wrapper clearfixNew">
            <el-pagination
                background
                :current-page.sync="page.now_page"
                :page-size="page.page_size"
                layout="total, prev, pager, next, jumper"
                :total="page.total_count"
                @current-change="getTableData"
            />
        </div> -->
    </div>
</template>

<script>
export default {
    data () {
        return {
            order_process_cancel_need_verify: 0,
            tableData: []
            // page: {
            //     now_page: 1,
            //     total_count: 20,
            //     page_size: 10
            // },
        };
    },
    mounted () {
        this.$store.commit('header/SET_HEADER', [{title: '校园商城'},{title: '店铺设置'},{title: '售后设置'}]);
        this.getTableData();
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/ShopRefundAddress/getList', {}, resp=>{
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    // this.page.now_page = resp.data.page.now_page;
                    // this.page.total_count = resp.data.page.total_count;
                    // this.page.page_size = resp.data.page.page_size;
                }
            });

            this.$post('/Shop/getConfig', {}, resp=>{
                if (resp.code == 1) {
                    this.order_process_cancel_need_verify = resp.data.order_process_cancel_need_verify;
                }
            });
        },

        /**
         * @description 设置审核状态
         */
        fnSetAuti () {
            this.$post('/Shop/setConfig', {
                order_process_cancel_need_verify: this.order_process_cancel_need_verify
            }, resp => {
                if (resp.code == 1) {
                    this.$notify({
                        title: '提示',
                        message: '修改成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 删除地址
         */
        deleteAddress (row) {
            this.$confirm('此操作将删除该地址, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/ShopRefundAddress/delete', {
                    address_no: row.address_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            duration: 2000,
                            type: 'success'
                        });
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * @description 编辑地址
         */
        editAddress (row) {
            this.$router.push({
                name: 'goodAfterEdit',
                query: {
                    no: JSON.stringify(row)
                }
            });
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .marketgoodAfterSale {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: calc(100vh - 84px);
        box-sizing: border-box;
        background: #fff;
        .sale-title {
            width: 100%;
            height: 73px;
            display: flex;
            align-items: center;
            padding-left: 32px;
            color: #3F454B;
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 10px;
            background: #fff;
        }
        .sale-header {
            width: 100%;
            height: 172px;
            background: #fff;
            margin-bottom: 10px;
            box-sizing: border-box;
            padding: 24px 32px;
            .sale-head-title {
                color: #333333;
                font-size: 16px;
                font-weight: 500;
                height: 16px;
                margin-bottom: 24px;
            }
            .sale-main {
                width: 100%;
                height: 84px;
                background:rgba(251,251,251,1);
                border-radius:2px;
                border:1px solid rgba(238,238,238,1);
                display: flex;
                align-items: center;
                padding-left: 32px;
                .sale-main-text {
                    color: #3F454B;
                    font-size: 14px;
                    margin-right: 24px;
                }
            }
        }
        .header {
            height: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding-left: 32px;
            padding-right: 32px;
            box-sizing: border-box;
            .icon-jiahao {
                font-size: 14px;
                color: #fff;
                margin-right: 0px;
            }
            .wrap-title {
                color: #333333;
                font-size: 16px;
                font-weight: 500;
            }
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            padding-right: 32px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
        .adress {
            display: flex;
            align-items: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &-label {
                display: inline-block;
                color: #fff;
                font-size: 12px;
                background: #32CF6F;
                padding: 0px 6px;
                border-radius: 4px;
                margin-right: 1px;
                transform: scale(.75);
            }
        }
    }
    /* 字体高亮 */
    .cursor-font {
        color: rgb(64, 158, 255);
        cursor: pointer;
    }
</style>
<style lang="less">
    .goodAfterSale{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            background: #F2F2F2;
            color: #333333;
            font-weight: 500;
        }
        .el-form-item__label {
            line-height: 10px;
        }
        .sale-input .el-input__inner {
            background:rgba(251,251,251,1);
            border-radius:4px;
            width: 332px;
            height: 36px;
            color: #333333;
            &::-webkit-input-placeholder {
                color: #C2C2C2;
            }
        }
        .sale-input .el-textarea__inner {
            background:rgba(251,251,251,1);
            border-radius:4px;
            width: 332px;
            height: 36px;
            color: #333333;
            &::-webkit-input-placeholder {
                color: #C2C2C2;
            }
        }
        .sale-inject-input .el-input__inner{
            color: #999;
            &::-webkit-input-placeholder {
                color: #999;
            }
        }
        .sale-inject-input .el-textarea__inner{
            color: #999;
            &::-webkit-input-placeholder {
                color: #999;
            }
        }
        .el-inject-head .el-form-item__label {
            color: #999;
        }
        .el-form-item {
            margin-bottom: 24px;
            margin-right: 32px;
        }
    }
    .clearfixNew {
        .btn-prev, .btn-next {
            background-color: transparent !important;
        }
        .el-pager .active {
            background-color: transparent !important;
            color: #20A0FF !important;
        }
        .el-pager .number {
            background-color: transparent !important;
            color: #606266;
        }
        .el-pagination__jump {
            margin-left: 20px;
        }
    }
</style>